<template>
  <a-layout :class="['admin-layout', 'beauty-scroll']">
    <!-- SideMenu -->
    <div class="drawer-wrapper" v-if="isMobile">
      <a-drawer class="drawer" :placement="placement" :closable="false" :visible="visible" @close="onDrawerClose" width="256" :get-container="false">
        <SideMenu :class="['fixed-side']" :collapsed="false" :sideMenuWidth="256"/>
      </a-drawer>
      <div class="handler" :style="visible ? {'left':'257px'} : {'left':'0px'}">
        <a-icon :name="visible ? 'CloseOutlined' : 'BarsOutlined'" @click="changeDrawer" />
      </div>
    </div>
    <div v-else>
      <SideMenu :class="['fixed-side']" :collapsed="collapsed" :sideMenuWidth="sideMenuWidth" />
      <div :style="`width: ${sideMenuWidth}px; min-width: ${sideMenuWidth}px;max-width: ${sideMenuWidth}px;`" class="virtual-side"></div>
    </div>
    <!-- SideMenu -->

    <a-layout class="admin-layout-main beauty-scroll">
      <AdminHeader v-model:collapsed="collapsed"></AdminHeader>
      <a-layout-content>
        <slot></slot>
      </a-layout-content> 
      <a-layout-footer>
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script setup>
import SideMenu from './components/menu/SideMenu'
import AdminHeader from './components/admin-header/admin-header.vue'
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
const store = useStore()

const isMobile = computed(()=>store.getters['setting/isMobile'])
const placement = ref('left')
const visible = ref(false)
const onDrawerClose = () => {
  visible.value = false
}
const changeDrawer = () => {
  visible.value = !visible.value
}

let collapsed = ref(false)

//设置 sideMenu 宽度
let sideMenuWidth = computed(()=>{
  return collapsed.value ? process.env.VUE_APP_SIDE_MENU_WIDTH_MIN : process.env.VUE_APP_SIDE_MENU_WIDTH_MAX
})

</script>

<style lang="less">
.admin-layout{
  .drawer-wrapper{
    position: relative;
  }
  .admin-layout-main{
    min-height: 100vh;
    .admin-header{
      top: 0;
      right: 0;
      overflow: hidden;
      transition: all 0.2s;
      &.fixed-tabs.multi-page:not(.fixed-header){
        height: 0;
      }
    }
  }
}
.handler{
  position: absolute;
  display: inline-block;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  top: 200px;
  z-index: 1001;
  height: 40px;
  width: 40px;
  background-color: #fff;
  font-size: 26px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  line-height: 40px;
}
.fixed-side{
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
}
.virtual-side{
  transition: all 0.2s;
}
</style>
<style>
.ant-drawer-body{
  padding: 0;
}
</style>